<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>环形图</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="js/echarts.min.js"></script>
    <style type="text/css">
        #main{
            margin:30px auto 0 auto;
            box-shadow: 0 0 10px 0px #000;
            padding: 15px
        }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:500px;">
    </div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        //app.title = '环形图';

        option = {
            //饼图颜色
            color: ['#ffa32c','#ffd754', '#44a1df', '#224a87','#52f5a7', ],
            title: {
                text: '环形图',    //正标题
                subtext: 'xinglong.fan', //副标题
                left: 'center'    //居中对齐
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            // 图形显示
            legend: {
                orient: 'vertical',        //布局的方向,垂直排列
                // 默认圆角矩形roundRect，'circle' 椭圆，'rect' 矩形，'roundRect' 圆角矩形 '，triangle' 三角形，'diamond' 菱形，'pin' 正圆 ，'arrow' 箭头.使用icon:'image:/ico/echarts.png',
                icon: 'pin',   
                x: '80%',
                y: '50%',
                //图例相互之间的距离
                itemGap: 20,  
                //图例的宽度             
                // itemWidth: 10, 
                //图例的高度            
                // itemHeight: 10,
                data: [

                        {value:40, name:'博士'},
                        {value:20, name:'硕士'},
                        {value:40, name:'本科'},
                        {value:40, name:'专科'},
                        {value:40, name:'其他'}

                ],

                formatter: function (name) {
                    //百分比数据的计算
                    var data = [
                        {value:40, name:'博士'},
                        {value:20, name:'硕士'},
                        {value:40, name:'本科'},
                        {value:40, name:'专科'},
                        {value:40, name:'其他'}

                    ];
                    var total = 0;
                    var target=null;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            target = data[i].value;
                        }
                    }
                     // toFixed()四舍五入两位小数
                    return name +'  '+target+ '人' + '  ' + ((target / total) * 100).toFixed(2) + '%';
                }
            },

            series: [
                {
                    // 双饼状图指示
                    name: '学历：人数/占本分比',
                    //类型饼状图
                    type: 'pie',
                    //是否开启 hover 在扇区上的放大动画效果，默认默认开启
                    //hoverAnimation:false,
                    //内半径，外半径，内半径0时为弧形
                    radius: ['40%', '70%'],
                    //是否启用防止标签重叠策略，默认默认开启
                    avoidLabelOverlap: false,
                    // center 圆心位置，距离top，距离left
                    //center: ['50%', '50%'], 
                    //图形是否不响应和触发鼠标事件
                    //silent: true,
                
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value:335, name:'博士'},
                        {value:310, name:'硕士'},
                        {value:234, name:'本科'},
                        {value:135, name:'专科'},
                        {value:1548, name:'其他'}
                    ]
                }
            ]

        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
    </script>
</body>

</html>